<template>
  <a-drawer :z-index="15" title="快递详情" :width="660" :visible="visible" @close="onClose">
    <a-row style="margin-bottom:20px;">
      <a-col :span="12">
        <span class="title-label">快递公司：</span>
        {{ logisticsData.logisticsName || "-" }}
      </a-col>
      <a-col :span="12">
        <span class="title-label">物流单号：</span>
        {{ logisticsData.logisticsNo || "-" }}
      </a-col>
    </a-row>
    <a-timeline :pending="false">
      <a-timeline-item v-for="(v, i) in logisticsData.data" :key="i">
        <img slot="dot" style="width: 16px; height: 16px" src="../../../assets/img/duis.png" alt="" v-if="i == 0" />
        <div slot="dot" style="width: 12px;height: 12px;background: #d8d8d8;border-radius: 50%;" v-else></div>
        <div class="t1">{{ v.status }}</div>
        <div class="t2">{{ v.context }}</div>
        <div class="t3">{{ v.time }}</div>
      </a-timeline-item>
    </a-timeline>
  </a-drawer>
</template>

<script>
import { getKuaidi100Detail } from '@/services/commonApi'
export default {
  data () {
    return {
      visible: false,
      reqData: {
        logisticsNo: '',
        logisticsType: ''
      },
      logisticsData: {}
    }
  },
  methods: {
    onInitial (data) {
      this.reqData.logisticsNo = data.logisticsNo
      this.reqData.logisticsType = data.logisticsType
      this.logisticsData = {}
      this.visible = true
      this.getDetail()
    },
    onClose () {
      this.visible = false
    },
    async getDetail () {
      const res = await getKuaidi100Detail(this.reqData)
      if (res.isSuccess) {
        console.log('res', res)
        this.logisticsData = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.t1 {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #333333;
}

.t2 {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: #606266;
  line-height: 16px;
}

.t3 {
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: #999999;
  line-height: 16px;
}
</style>
